<script>
import { getMenuItems } from '@/views/cssEffects/menus';
import TabSwitching from '@/components/TabSwitching/TabSwitching.vue';

export default {
    name: 'BackgroundSwitch',
    components: { TabSwitching },
    data() {
        return {
            menuItems: getMenuItems(),
            dataList: [
                {
                    title: '背景切换'
                }
            ],
            accountClass: 'sun'
        };
    }
};
</script>

<template>
    <div class="bg-box" :class="accountClass">
        <!--选项卡切换-->
        <TabSwitching :data="menuItems" :account="2" />
        <div class="bg-btn" @click="accountClass = accountClass === 'sun' ? 'moon' : 'sun'">
            <img src="@/assets/images/backgroundSwitch/sun.png" />
            <img src="@/assets/images/backgroundSwitch/moon.png" />
        </div>
        <div class="main">
            <div v-for="item in dataList" :key="item.title" class="item">
                {{ item.title }}
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.bg-box {
    height: 100vh;
    background: linear-gradient(to right, #ccc 1px, transparent 1px), linear-gradient(to bottom, #ccc 1px, transparent 1px);
    background-repeat: repeat; /* 默认为 repeat */
    background-size: 50px 50px;
    position: relative;
    z-index: 1;
    .bg-btn {
        img {
            width: 30px;
            height: 30px;
            margin-left: 10px;
        }
        img:first-child {
            display: none;
        }
        img:last-child {
            display: block;
        }
    }
    &.moon {
        //z-index: -1;
        &:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: 0;
            z-index: 0;
            background: linear-gradient(to right, #000 1px, transparent 1px), linear-gradient(to bottom, #000 1px, transparent 1px);
        }
        .bg-btn {
            img:first-child {
                display: block;
            }
            img:last-child {
                display: none;
            }
        }
    }
}
</style>
